import { createStore } from "vuex";
import { store as appState, AppStore } from './modules/app'
import { store as permissionsState, PermissionStore } from './modules/permissions'
import { store as userState, UserStore } from './modules/user'
import { store as tagsViewState, TagsStore } from './modules/tagsview'

import { AppState } from './modules/app/state'
import { UserState } from './modules/user/state'
import { PermissionState } from './modules/permissions/state'
import { TagsViewState } from './modules/tagsview/state'


export enum ModuleTypes {
    appModule = 'app',
    permissionsModule = 'permissions',
    userModule = 'user',
    tagsviewModule = 'tagsview'
}


export type RootState = {
    [ModuleTypes.appModule]: AppState
    [ModuleTypes.permissionsModule]: PermissionState
    [ModuleTypes.userModule]: UserState,
    [ModuleTypes.tagsviewModule]: TagsViewState
}

export type Store = AppStore<Pick<RootState, ModuleTypes.appModule>>
    & PermissionStore<Pick<RootState, ModuleTypes.permissionsModule>> & UserStore<Pick<RootState, ModuleTypes.userModule>>
    & TagsStore<Pick<RootState, ModuleTypes.tagsviewModule>>


export const store = createStore({
    modules: {
        [ModuleTypes.appModule]: appState,
        [ModuleTypes.userModule]: userState,
        [ModuleTypes.permissionsModule]: permissionsState,
        [ModuleTypes.tagsviewModule]: tagsViewState
    },
});

export function useStore(): Store {
    return store as Store
}
